<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" width="40px" active-name="index" @on-select="onSelectHandle">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                    <MenuItem name="1" to="/manage/index" v-if="isManager">
                        <Icon type="logo-windows" />
                        后台管理
                    </MenuItem>
                    <MenuItem name="index" to="/donate/index">
                        <Icon type="ios-home" />
                        主页
                    </MenuItem>
                        <MenuItem name="2" to="/donate/help/index">
                            <Icon type="ios-navigate"></Icon>
                            求助动态
                        </MenuItem>
                        <MenuItem name="3"   to="/donate/donate/rank">
                            <Icon type="ios-keypad"></Icon>
                            捐赠达人榜
                        </MenuItem>
                        <MenuItem name="4"  to="/donate/post/index">
                            <Icon type="ios-analytics"></Icon>
                            交流论坛
                        </MenuItem>
                        <MenuItem name="5"   to="/donate/donate/myList">
                            <Icon type="ios-analytics-outline"></Icon>
                            我的捐赠
                        </MenuItem>
                        <MenuItem name="6"   to="/donate/help/myApply">
                            <Icon type="ios-analytics"></Icon>
                            我的求助
                        </MenuItem>
                        <Submenu name="7">
                            <template slot="title">
                                <Icon type="ios-contact-outline" />
                                {{realName}}
                            </template>
                            <MenuItem name="userInfo" to="/donate/user/view">个人信息</MenuItem>
                            <MenuItem name="userInfoEdit" to="/donate/user/edit">修改信息</MenuItem>
                            <MenuItem name="logout">退出</MenuItem>
                        </Submenu>
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '40px 50px'}">
                <Card style="min-height: 600px">
                    <router-view/>
                </Card>
            </Content>
            <Footer class="layout-footer-center">2019-2020 软件工程</Footer>
        </Layout>
    </div>
</template>

<script>
    import user from '@/common/user'
    export default {
        name: 'Donate',
        components: {

        },
        data(){
            let realName=user.getRealName();
            let  roles=user.getUser().roles;
            return {realName,isManager:(roles.length>0)};
        },
        methods:{
            onSelectHandle(name){
                if(name=="logout"){
                    //退出功能
                    user.logout(this);
                }
            }
        }
    }
</script>
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 160px;
        height: 60px;
        /*background: #5b6270;*/
        background-image: url('../assets/images/bg-logo.png');
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 0px;
    }
    .layout-nav{
        /*width: 890px;*/
        margin: 0 auto;
        margin-right: 5px;
        float: right;
    }
    .layout-footer-center{
        text-align: center;
    }
</style>
